<template>
  <div id="app">
    <el-container class="layout-container">
      <!-- 头部 -->
      <el-header class="header">
        <div class="header-content">
          <h1 class="title">
            <el-icon><Document /></el-icon>
            GitBuild 自动化打包系统
          </h1>
          <div class="header-actions">
            <el-button
              type="success"
              @click="openRepoDoc"
              style="margin-right: 10px"
            >
              <el-icon><Link /></el-icon>
              仓库文档
            </el-button>
            <el-button
              type="warning"
              @click="goToDraft"
              style="margin-right: 10px"
            >
              <el-icon><Document /></el-icon>
              草稿箱管理
            </el-button>
            <el-button type="primary" @click="showHistory = !showHistory">
              <el-icon><Clock /></el-icon>
              历史记录
            </el-button>
          </div>
        </div>
      </el-header>

      <el-container>
        <!-- 主要内容区 - 使用路由视图，keep-alive 保持打包页面状态 -->
        <el-main class="main-content">
          <router-view v-slot="{ Component }">
            <keep-alive include="BuildPage">
              <component :is="Component" />
            </keep-alive>
          </router-view>
        </el-main>

        <!-- 历史记录侧边栏保持不变 -->
        <el-aside v-if="showHistory" width="900px" class="history-sidebar">
          <BuildHistory />
        </el-aside>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
import BuildHistory from "./components/BuildHistory.vue";

export default {
  name: "GitBuildApp",
  components: {
    BuildHistory,
  },
  setup() {
    const router = useRouter();
    const showHistory = ref(false);

    // 打开仓库文档
    const openRepoDoc = () => {
      window.open(
        "https://alidocs.dingtalk.com/i/nodes/QG53mjyd805jw15BUQGbnkD7W6zbX04v?utm_scene=person_space",
        "_blank",
      );
    };

    // 跳转到草稿箱页面
    const goToDraft = () => {
      router.push('/draft');
    };

    return {
      showHistory,
      openRepoDoc,
      goToDraft,
    };
  },
};
</script>

<style scoped>
.layout-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e1e8ed;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.title {
  margin: 0;
  color: #2c3e50;
  font-size: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.main-content {
  padding: 0;
  overflow-y: auto;
}

.history-sidebar {
  padding: 20px;
  background: transparent;
}
</style>
